import { defineComponent, ref } from "vue"
import passwordLess from './index.module.less'
import YqButton from './YqButton/index.tsx'
import { useRouter } from "vue-router"
export default defineComponent({
  setup (props) {
    const originPassword = ref('')

    const newPassword = ref('')

    const renewPassword = ref('')

    const eyes1 = ref(false)

    const eyes2 = ref(false)

    const eyes3 = ref(false)

    const router = useRouter()

    const handleOriginPasswordChange = (event: Event) => {
      const target = event.target as HTMLInputElement
      originPassword.value = target.value
    }

    const handleNewPasswordChange = (event: Event) => {
      const target = event.target as HTMLInputElement
      newPassword.value = target.value
    }

    const handleRenewPasswordChange = (event: Event) => {
      const target = event.target as HTMLInputElement
      renewPassword.value = target.value
    }
    
    return () => (
      <div class={ passwordLess.profile_password }>
        <div class={ passwordLess.profile_password_origin }>
          <div class={ passwordLess.profile_password_origin_text }>原密码</div>
          <div class={ passwordLess.profile_password_origin_input }>
            <input autocomplete="off" value={ originPassword.value  } onInput={ handleOriginPasswordChange } placeholder="请输入原密码" type={ eyes1.value ? 'text' : 'password' } />
            {
              eyes1.value ?
              <svg style={{ top: '50%' }} onClick={ () => eyes1.value = !eyes1.value } class="alibaba-icon" aria-hidden="true">
                <use xlinkHref="#icon-eye-open"></use>
              </svg>
              :
              <svg style={{ top: '55%' }} onClick={ () => eyes1.value = !eyes1.value } class="alibaba-icon" aria-hidden="true">
                <use xlinkHref="#icon-eye-close"></use>
              </svg>
            }
          </div>
        </div>
        <div class={ passwordLess.profile_password_origin }>
          <div class={ passwordLess.profile_password_origin_text }>新密码</div>
          <div class={ passwordLess.profile_password_origin_input }>
            <input autocomplete="off" value={ newPassword.value  } onInput={ handleNewPasswordChange } placeholder="请输入新密码" type={ eyes2.value ? 'text' : 'password'  } />
            {
              eyes2.value ?
              <svg style={{ top: '50%' }} onClick={ () => eyes2.value = !eyes2.value } class="alibaba-icon" aria-hidden="true">
                <use xlinkHref="#icon-eye-open"></use>
              </svg>
              :
              <svg style={{ top: '55%' }} onClick={ () => eyes2.value = !eyes2.value } class="alibaba-icon" aria-hidden="true">
                <use xlinkHref="#icon-eye-close"></use>
              </svg>
            }
          </div>
        </div>
        <div class={ passwordLess.profile_password_origin }>
          <div class={ passwordLess.profile_password_origin_text }>重复密码</div>
          <div class={ passwordLess.profile_password_origin_input }>
            <input autocomplete="off" value={ renewPassword.value  } onInput={ handleRenewPasswordChange } placeholder="请再次输入新密码" type={ eyes3.value ? 'text' : 'password' } />
            {
              eyes3.value ?
              <svg style={{ top: '50%' }} onClick={ () => eyes3.value = !eyes3.value } class="alibaba-icon" aria-hidden="true">
                <use xlinkHref="#icon-eye-open"></use>
              </svg>
              :
              <svg style={{ top: '55%' }} onClick={ () => eyes3.value = !eyes3.value } class="alibaba-icon" aria-hidden="true">
                <use xlinkHref="#icon-eye-close"></use>
              </svg>
            }
          </div>
        </div>
        <div class={ passwordLess.profile_password_btn }>
          <YqButton width={ 210 } height={ 48 } size={ 14 }>修改密码</YqButton>
          <YqButton width={ 210 } height={ 48 } size={ 14 } onClick={ () => router.push({ name: 'forgotpwd' })  }>忘记密码</YqButton>
          <YqButton width={ 210 } height={ 48 } size={ 14 } plain>退出登录</YqButton>
        </div>
      </div>
    )
  }
})